<template>
  <el-card shadow="always">
    <div slot="header">管理员管理</div>
    <div class="btns">
      <el-button type="success" size="mini" icon="el-icon-plus" @click="addDialog = true">新增</el-button>
    </div>
    <table-pagination
      :tableData="list"
      :table="table"
      :columns="columns"
      hidePagination
    >
      <template #role="{ row }">
        <el-tag size="mini" effect="dark">{{ row.role_name }}</el-tag>
      </template>
      <template #right="{ row }">
        <el-tag type="danger" size="mini" effect="dark">{{
          row.rights_count
        }}</el-tag>
      </template>
      <template #edit="{ row }">
        <el-button type="text" size="mini">编辑</el-button>
        <ConfirmButton
          :popconfirm="{ title: `确认删除 “${row.admin_username}” 管理员?` }"
          :button="{ type: 'text', size: 'mini' }"
          @confirm="removeManager(row.admin_id)"
          >删除</ConfirmButton
        >
      </template>
    </table-pagination>

    <AddManagerDialog :visible.sync="addDialog" @reload="findAdminUser" />
  </el-card>
</template>

<script>
import TablePagination from "@/components/TablePagination";
import table from "./config/table";
import columns from "./config/columns";
import { selectAdminList, deleteAdminUser } from "@/api/admin";
export default {
  components: {
    TablePagination,
    AddManagerDialog: () => import("./dialog/AddManagerDialog.vue"),
  },
  data() {
    return {
      table: table,
      columns: columns,
      addDialog: false,
      list: [],
    };
  },
  methods: {
    async findAdminUser() {
      let { data } = await selectAdminList();
      this.list = data;
    },
    async removeManager(admin_id) {
      await deleteAdminUser({ admin_id: admin_id });
      this.findAdminUser();
    },
  },
  created() {
    this.findAdminUser();
  },
};
</script>
